// 端口列表
<template>
  <el-tabs v-model="activeName" type="border-card" @tab-click="tabClick">
    <el-tab-pane
      v-for="(face, index1) in afsInfo.afsFaceList"
      :key="index1"
      :label="face.faceName"
      :name="`${face.deviceId}-${face.faceFlag}`"
    >
      <el-row>
        <el-col :span="24">
          <PortTip class="mb-10" />
        </el-col>
        <el-col :span="24">
          <el-row
            class="segment-list-box flex flex-wrap justify-start"
            :gutter="8"
            style="
    overflow: hidden;
    overflow-y: auto;"
          >
            <div
              v-for="(port, index2) in face.portList"
              :key="index2"
              class="conn-content"
            >
              <!-- A面 -->
              <div
                :class="[
                  `color-${portIdKey[port.portId].status &&
                    portIdKey[port.portId].status.toLowerCase()}`,
                  'conn-item',
                  { 'selected-port-link': portIdKey[port.portId].selected }
                ]"
                @click="portChange(port.portId, 'selected')"
              >
                {{ portIdKey[port.portId].name || port.portId }}
              </div>
              <!-- B面 -->
              <div
                v-if="port.connPortId"
                :class="[
                  `color-${portIdKey[port.connPortId].status &&
                    portIdKey[port.connPortId].status.toLowerCase()}`,
                  'conn-item',
                  { 'selected-port-link': portIdKey[port.connPortId].conn_selected },
                  'port-item'
                ]"
                @click="portChange(port.connPortId, 'conn_selected')"
              >
                {{ portIdKey[port.connPortId].name }}
              </div>
              <div v-else class="conn-item port-item">--</div>
            </div>
          </el-row>
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  import mixin from './mixin'
  import PortTip from './PortTip.vue'
  export default {
    components: { PortTip },
    mixins: [mixin],
    props: {
      deviceInfo: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        activeName: 'first',
        afsInfo: {}, // 记录afs详情（端口，id，name等）
        portIdKey: {}, // key是portId，value是portName，用来反显对端端口的portName
        selectedPortList: [] // 记录选中的端口,selectedPortList[0]记录port，selectedPortList[1]记录conn_port
      }
    },
    mounted() {
      console.log(this.deviceInfo)
      this.getAfsAllports()
    },
    methods: {
      tabClick() {
        this.selectedPortList.forEach(i => {
          const selected = i.selected
          i.selected = i.conn_selected
          i.conn_selected = selected
        })
      },
      // type=selected当前面当前端口 type=conn_selected当前面对端端口
      portChange(portId, type) {
        if (this.deviceInfo.afsType === 'A') {
          this.portChange_A(portId, type)
        } else if (this.deviceInfo.afsType === 'B') {
          this.portChange_B(portId, type)
        } else if (this.deviceInfo.afsType === 'C') {
          this.portChange_C(portId, type)
        } else if (this.deviceInfo.afsType === 'D') {
          this.portChange_D(portId, type)
        }
      },
      // 根据设备id查询
      getAfsAllports() {
        this.afsInfo = {}
        this.portIdKey = {}
        this.selectedPortList = []
        if (!this.deviceInfo.afsFaceList) return
        this.deviceInfo.afsFaceList.forEach(ele1 => {
          ele1.portList.forEach(ele2 => {
            ele2.portName = `${ele1.faceFlag.replace(/M/g, 'B')}-${
              ele2.partPortNo
            }`
            ele2.afsType = this.deviceInfo.afsType
            this.portIdKey[ele2.portId] = {
              name: `${ele1.faceFlag.replace(/M/g, 'B')}-${
                ele2.partPortNo
              }`, // 端口名称
              status: ele2.status, // 端口状态
              partFlag: ele2.partFlag, // 端口所在面
              portNo: ele2.devPortNo, // 端口序号
              portId: ele2.portId, // 端口状态
              selected: false,
              conn_selected: false
            }
          })
        })
        this.afsInfo = { ...this.deviceInfo }
        this.activeName = `${this.afsInfo.afsFaceList[0].deviceId}-${
          this.afsInfo.afsFaceList[0].faceFlag
        }`
      }
    }
  }
</script>
<style lang="scss" scoped>
@import "@/assets/css/mixin.scss";
.conn-content {
  width: 70px;
  margin-top: 5px;
  margin-left: 10px;
  user-select: none;
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  .conn-item {
    text-align: center;
    padding: 5px 0;
  }
  .conn-item + .conn-item {
    border-top-width: 1px;
    border-top-style: dotted;
  }
}
.selected-port-link {
  background: #122f85;
}
</style>
